<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./form.css">
    <title>Document</title>
</head>
<body>
    <form id="form1">
        用户名：<input type="text" name="username" >
        密码：<input type="password" name="password" >
        电话：<input type="text" name="phone">
        <input type="button" value="发送ajax请求" id="sub">
    </form>
    <div></div>
    <img src="" alt="" width="80">
    <script>
        document.querySelector("#sub").onclick = function(){
            var xhr = new XMLHttpRequest();

            xhr.open("post","02-formData.php");
            // 1.手动拼接
            // 2.如果是jq,那么就可以使用表单序列化方法
            // 3.现在在XMLHttpRequest2.0   ,我们可以使用FormData来收集表单数据

            // 1.获取表单
            var myform = document.querySelector("#form1");
            // 2.将表单做为参数传递，在创建formData对象的时候
            var formdata = new FormData(myform);

            // 特点之一：可以自由的追加参数
            formdata.append("address","传智播客");
            // 3.生成的formData对象就可以直接做为异步对象的参数传递
            xhr.send(formdata);

            xhr.onreadystatechange = function(){
                if(xhr.status == 200 && xhr.readyState == 4){
                    console.log(xhr.responseText);
                }
            }
        }
        
    </script>
</body>
</html>